import {
  useRef,
  forwardRef,
  useImperativeHandle,
} from 'react'
import classNames from 'classnames'
import { withNativeProps } from '../../utils/native-props'
import type {
  ListRef,
  ListProps,
} from './type'

const classPrefix = 'rt-list'

export const List = forwardRef<ListRef, ListProps>((props, ref) => {
  const {
    header,
    mode = 'default',
    children,
  } = props

  const nativeElementRef = useRef<HTMLDivElement>(null)

  useImperativeHandle(ref, () => ({
    get nativeElement() {
      return nativeElementRef.current
    },
  }))

  return withNativeProps(
    props,
    <div
      className={classNames(classPrefix, `${classPrefix}-${mode}`)}
      ref={nativeElementRef}
    >
      {header && (
        <div className={`${classPrefix}-header`}>{header}</div>
      )}
      <div className={`${classPrefix}-body`}>
        <div className={`${classPrefix}-body-inner`}>{children}</div>
      </div>
    </div>,
  )
})
